<!--
 * @Descripttion:
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:06
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-26 17:26:57
-->
<template>
  <div>
    <div class="flex-center" style="padding: 20px 16px 10px">
      <div class="web-item-title mr-md"></div>
      <div class="flex-1 text-bold c-title">{{o.data.title ||'表单模块'}}</div>
      <div class="flex-y-baseline c-caption" style="font-style: normal;">
        查看更多
        <i class="iconfont iconjiantou" style="font-size:13px"></i>
      </div>
    </div>
    <div
      class="fill-base radius-15 ml-lg mr-lg mb-lg pd-lg f-caption c-caption flex-column text-center"
    >
      <div class="c-title" style="font-size: 17px;">{{o.data.title || '表单标题'}}</div>
      <div class="webtype-line" :style="{backgroundColor:primaryColor}"></div>
      <div class="mt-md mb-lg">表单描述文字</div>
      <div class="webtype-input mb-lg">
        <div class="pl-lg pr-lg radius-15 mb-md text-left">请填写您的姓名</div>
        <div class="pl-lg pr-lg radius-15 mb-md text-left">请填写您的手机号码</div>
        <div class="pl-lg pr-lg radius-15 text-left">请填写您想说的话</div>
      </div>
      <div class="upload-item flex-center flex-column fill-body radius-15">
        <div class="upload-icon flex-center c-title radius-10">
          <i class="iconfont icon-camera"></i>
        </div>
        <div class="cur-text f-caption c-caption">上传图片</div>
        <div class="cur-imgsize f-caption c-caption mt-sm">0/9</div>
      </div>
      <div
        class="flex-center h-80 mb-lg radius-15 f-title"
        :style="{backgroundColor:primaryColor,color:'#fff'}"
      >立即留言</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'formModule',
  props: {
    o: Object
  },
  data () {
    return {
      primaryColor: '#19c865'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">

.webtype-line {
  width: 25px;
  height: 3px;
  margin: 0px auto;
  border-radius: 3px;
}

.webtype-input{
  .text-left {
    width: 100%;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eeeeee;
  }
}
.upload-item{
  width: 110px;
  height: 110px;
  margin-bottom: 15px;
  .upload-icon {
    width: 40px;
    height: 38px;
    background: #FFFFFF;

    .iconfont {
      font-size: 20px;
      display: block;
    }
  }

  .cur-text {
    line-height: 1.1;
    margin-top: 9px;
  }

  .cur-imgsize {
    line-height: 1.1;
  }
}

.webtype-opacity {
  width: 165px;
  height: 165px;
  line-height: 165px;
  font-size: 40px;
  text-align: center;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.3);
}
</style>
